import { useLocation } from "react-router-dom";
import React, { useState, useEffect } from "react";
import { Sidebar } from "react-vant";
import { WapHomeO, Bars, Cart, Manager } from "@react-vant/icons";
import { Tabbar, Empty } from "react-vant";
import { useNavigate } from "react-router-dom";
import { types, types_goods } from "../api/classType";
import stylee from "./classify.module.css";
export default function Qaxonomi(props) {
  let navigate = useNavigate()
  let { state } = useLocation();
  const [active, setActive] = useState(0);
  let navi = useNavigate();
  const [contents, setContent] = useState([]);
  // 空状态
  const [nulls, setNull] = useState(0);
  // 请求分类左侧菜单
  const [leftlist, setLeft] = useState([]);
  useEffect(() => {
    types().then((res) => {
      console.log(res, "分类");
      setLeft(res.data.types);
    });
  }, []);
  // 列表id
  const [classifyid] = useState("");

  console.log(classifyid);
  // 点击商品跳转商品详情
  // 右侧内容渲染
  console.log(nulls, "1234");
  function showDom() {
    if (nulls == 1) {
      return contents?.map((item) => (
        <div className={stylee.box}>
          <img
            onClick={() => {
              navi("/Perticularss", {
                replace: false,
                state: {
                  id: item.id,
                },
              });
            }}
            className={stylee.imgs}
            src={item.imgs}
            alt=""
          />
          <div className={stylee.names}>{item.name}</div>
        </div>
      ));
    } else if (nulls == 0) {
      return <Empty description="暂无商品" />;
    }
  }
  // 内容请求点击列表获取id
  function fun(classifyid) {
    console.log(nulls);
    // 内容请求
    console.log(classifyid);
    types_goods({ id: classifyid }).then((res) => {
      console.log(res.data);
      if (res.code == 1) {
        console.log(res.data);
        setNull(res.data);
      } else {
        setNull("0");
      }
      setContent(res.data);
    });
  }
  function jump(targetPage) {
    navigate(targetPage)
}
  return (
    <div>
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
        }}
      >
        {leftlist.map((item) => (
          <Sidebar.Item
            contentStyle={{ backgroundColor: "#fff", padding: "18px 10px" }}
            onClick={() => {
              fun(item.id);
            }}
            title={item.name}
          >
            <div className={stylee.scroll}>{showDom()}</div>
          </Sidebar.Item>
        ))}
      </Sidebar>

      <Tabbar
        activeColor="blue"
        inactiveColor="#000000"
        defaultValue="personage"
        className={stylee.footer}
      >
        <Tabbar.Item
          icon={<WapHomeO />}
          onClick={() => jump("/Home")}
          name="Home"
        >
          首页
        </Tabbar.Item>
        <Tabbar.Item
          icon={<Bars />}
          onClick={() => jump("/Qaxonomi")}
          name="Qaxonomi"
        >
          分类
        </Tabbar.Item>
        <Tabbar.Item
          icon={<Cart />}
          onClick={() => jump("/ShoppingCart")}
          name="ShoppingCart"
        >
          购物车
        </Tabbar.Item>
        <Tabbar.Item
          icon={<Manager />}
          name="personage"
          onClick={() => jump("/personage")}
        >
          我的
        </Tabbar.Item>
      </Tabbar>
    </div>
  );
}
